@import "~src/web/variables";

:host {
    display: flex;

    &.search-view {
        .left-column,
        .right-column {
            display: none;
        }
    }

    .left-column,
    .right-column {
        display: flex;
    }

    .left-column {
        > .overflow-auto > .list-group {
            &:not(:first-of-type) {
                margin-top: $app-spacer-2;
            }
        }

        .list-group-item {
            padding: $app-db-view-mail-padding-y $app-db-view-mail-padding-x;
        }

        .list-group-item:not(.list-group-item-warning) {
            background-color: $app-db-view-color-bg-mail;
            color: $app-db-view-color-text-mail;
        }

        #{$app-prefix}-db-view-folder {
            ::ng-deep .fa {
                font-size: 80%;
            }
        }
    }

    > #{$app-prefix}-db-view-mails {
        margin-left: $app-spacer-2;
    }

    &::ng-deep {
        .overflow-auto {
            overflow: auto;
            height: 100%;
        }

        .flex-basis-half {
            flex-basis: 50%;
        }

        #{$app-prefix}-db-view-mails {
            overflow: auto;
            height: 100%;
        }

        #{$app-prefix}-db-view-mail-body {
            overflow: auto;
            height: 100%;
        }
    }
}
